<template>
    <div class="journey">
    <Header :show="true">日程</Header>
    <div class="content">
   		<ul>
   			<li v-for="item in arrList.journey">
   				<p class="date">{{item.date}}</p>
   				<div class="text-box">
	   				<div class="text" v-for="item1 in item.text">
	   					<div class="left">{{item1.time}}</div>
	   					<div class="right">
	   						<p class="p1">{{item1.title}}</p>
	   						<p class="p2">{{item1.context}}</p>
	   					</div>
	   				</div>
   				</div>
   			</li>
   		</ul>
    </div>
 </div>
</template>

<script>
import Header from '../base/Header'
	export default {
		data() {
			return {
				arrList:{},
				i:0
			}
		},
        components:{
        	Header
        },
        mounted(){
        	var id = this.$route.params.id;
        	this.fetchData(id);
        },
        methods: {
        	fetchData(id) {
        		let _this = this;
        		this.$http.get('static/data/invite.data')
        		.then(function(res){
        			_this.arrList = res.data[id].content;
        			_this.i = id;
        		}).catch(function(err){
        			console.log(err);
        		})
        	}
        }
	}
</script>

<style scoped lang="less">
.journey{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 110;
    background: #f4f4f4;
	.content{
		padding: 50px 10px 0;
		ul{
			li{
				.date{
					text-align: center;
					padding: 0.2rem 0 0.1rem;
					font-size: 0.28rem;
					color: #333;
				}
				.text-box{
					background: #fff;
					border-radius: 3px;
					.text{
						padding: 0.15rem;
						overflow: hidden;
						font-size: 0.26rem;
						.left{float: left;width: 40%;display: inline-block;color: #ff6100;line-height: 0.5rem;}
						.right{
							vertical-align: top;
							float: right;
							width: 60%;
							display: inline-block;
							vertical-align: top;
							margin: 0;
							line-height: 0.5rem;
							.p1{
								font-weight: bold;
								color: #444;
							}
							.p2{
								color: #666;
							}
						}
					}
				}

			}
		}
	}
}
</style>